import { Modal } from "antd";
import "./index.scss";
import { omit } from "lodash-es";
import { Empty } from 'antd';
import { ActionAside } from "./ActionAside";
import { GoToLink, GoToLinkConfig, goToLinkMsg } from "./actions/GoToLink";
import { ShowMessage, ShowMessageConfig, showMessageMsg } from "./actions/ShowMessage";
import { useEffect, useMemo, useState } from "react";
import { CustomJS, CustomJSConfig, customJSMsg } from "./actions/CustomJS";
import { ComponentMethod, ComponentMethodConfig, componentMethodMsg } from "./actions/ComponentMethod";
import { SendRequest, SendRequestConfig, sendRequestMsg } from "./actions/SendRequest";
import {CloseDialog,CloseDialogConfig,closeDialogMsg} from "./actions/CloseDialog";

export type ActionConfig =
  | GoToLinkConfig
  | ShowMessageConfig
  | CustomJSConfig
  | ComponentMethodConfig
  | SendRequestConfig
  | CloseDialogConfig;
interface ActionModalProps {
  visible: boolean;
  action?: ActionConfig;
  handleOk: (config?: ActionConfig) => void;
  handleCancel: () => void;
}
const allActionMsgArr = [goToLinkMsg, showMessageMsg, customJSMsg, componentMethodMsg, sendRequestMsg,closeDialogMsg];
const allActionMsgObj = allActionMsgArr.reduce((acc, cur) => {
  acc[cur.type] = cur;
  return acc;
}, {} as Record<string, any>);
export function ActionModal(props: ActionModalProps) {
  const { visible, handleCancel, action, handleOk } = props;
  const [key, setKey] = useState<string>("");
  const [curConfig, setCurConfig] = useState<ActionConfig>();

  useEffect(() => {
    if (!visible) {
      setKey("");
      setCurConfig(undefined);
    }
    if (action?.type) {
      setKey(action.type);
    }
  }, [visible]);

  const curAction = useMemo(() => {
    return allActionMsgObj[key];
  }, [key]);
  
  function handleModalConfirm(){
    let result = curConfig
    if(curAction && ["closeDialog"].includes(curAction.type)){
      result = omit(curAction, "desc") as ActionConfig
    }
    handleOk(result)
  }
  return (
    <Modal
      title="事件动作配置"
      width={800}
      open={visible}
      okText="添加"
      cancelText="取消"
      onOk={handleModalConfirm}
      onCancel={() => {
        handleCancel();
      }}
      centered
      className="action-config-dialog"
      destroyOnClose
    >
      <div className="flex h-[460px] border rounded action-config-panel">
        <ActionAside value={key} onChange={setKey} />
        <main className="flex-1 w-20 h-full overflow-y-auto right-panel">
          {curAction && (
            <>
              <div className="action-panel-title"> <span>动作说明</span> </div>
              <div className="action-desc"> <span>{curAction.desc}</span> </div>
              <div className="action-panel-title"> <span>基础设置</span> </div>
            </>
          )}

          {key === "goToLink" && (
            <GoToLink value={action?.type === "goToLink" ? action.config : undefined} onChange={config => setCurConfig(config)} />
          )}
          {key === "showMessage" && (
            <ShowMessage
              value={action?.type === "showMessage" ? action.config : undefined}
              onChange={config => setCurConfig(config)}
            />
          )}
          {key === "sendRequest" && (
            <SendRequest
              value={action?.type === "sendRequest" ? action.config : undefined}
              onChange={config => setCurConfig(config)}
            />
          )}
          {key === "customJS" && (
            <CustomJS
              value={action?.type === "customJS" ? action.code : ``}
              onChange={config => setCurConfig(config)}
            />
          )}
          {key === "componentMethod" && (
            <ComponentMethod
              key="showMessage"
              value={action?.type === "componentMethod" ? action.config : undefined}
              onChange={config => {
                setCurConfig(config);
              }}
            />
          )}
          {key === "closeDialog" && (
            // <CloseDialog key="closeDialog" />
            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="无配置内容" className="mt-20"/>
          )}
        </main>
      </div>
    </Modal>
  );
}
